<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css" type="text/css">
    <title>task25</title>
</head>
<body>
    <fieldset id="myModule">
        <legend><h3>树形组件</h3></legend>
        <input type="text" id="myText">
        <input type="button" id="searchBtn" value="搜索">
        <input type="button" id="delBtn" value="清除">
        <section>
            <div id="root">
                <span class="changeImg">
                    <span class="arrow left_arrow"></span>
                    <span class="myWord">
                        前端工程师
                    </span>
                    <img src="add.png" class="addImg hideNode">
                </span>

                <div class="child_1 hideNode">
                    <span class="changeImg">
                        <span class="arrow left_arrow"></span>
                        <span class="myWord">
                            技术
                        </span>
                        <img src="add.png" class="addImg hideNode">
                        <img src="delete.png" class="delImg hideNode">
                    </span>
                    <div class="child_2 hideNode">
                        <span class="changeImg">
                           <span class="myWord">
                            HTML5
                            </span>
                            <img src="add.png" class="addImg hideNode">
                            <img src="delete.png" class="delImg hideNode">
                        </span>
                     </div>
                        <div class="child_2 hideNode">
                            <span class="changeImg">
                               <span class="myWord">
                                CSS3
                                </span>
                                <img src="add.png" class="addImg hideNode">
                                <img src="delete.png" class="delImg hideNode">
                            </span>
                        </div>
                        <div class="child_2 hideNode">
                            <span class="changeImg">
                               <span class="myWord">
                                JavaScript
                                </span>
                                <img src="add.png" class="addImg hideNode">
                                <img src="delete.png" class="delImg hideNode">
                            </span>
                        </div>
                        <div class="child_2 hideNode">
                            <span class="changeImg">
                               <span class="myWord">
                                PHP
                                </span>
                                <img src="add.png" class="addImg hideNode">
                                <img src="delete.png" class="delImg hideNode">
                            </span>
                        </div>
                        <div class="child_2 hideNode">
                            <span class="changeImg">
                                <span class="arrow left_arrow"></span>
                                <span class="myWord">
                                Node.JS
                                </span>
                                <img src="add.png" class="addImg hideNode">
                                <img src="delete.png" class="delImg hideNode">
                            </span>
                            <div class="child_3 hideNode">
                                <span class="changeImg">
                                    <span class="myWord">
                                    JavaScript
                                    </span>
                                    <img src="add.png" class="addImg hideNode">
                                    <img src="delete.png" class="delImg hideNode">
                                </span>
                            </div>
                        </div>
                </div>

                <div class="child_1 hideNode">
                    <span class="changeImg">
                        <span class="arrow left_arrow"></span>
                        <span class="myWord">
                            IT公司
                        </span>
                        <img src="add.png" class="addImg hideNode">
                        <img src="delete.png" class="delImg hideNode">
                    </span>
                    <div class="child_2 hideNode">
                        <span class="changeImg">
                            <span class="myWord">
                            阿里巴巴
                            </span>
                            <img src="add.png" class="addImg hideNode">
                            <img src="delete.png" class="delImg hideNode">
                        </span>
                    </div>
                    <div class="child_2 hideNode">
                        <span class="changeImg">
                            <span class="myWord">
                            百度
                            </span>
                            <img src="add.png" class="addImg hideNode">
                            <img src="delete.png" class="delImg hideNode">
                        </span>
                    </div>
                    <div class="child_2 hideNode">
                        <span class="changeImg">
                            <span class="myWord">
                            腾讯
                            </span>
                            <img src="add.png" class="addImg hideNode">
                            <img src="delete.png" class="delImg hideNode">
                        </span>
                    </div>
                </div>

                <div class="child_1 hideNode">
                    <span class="changeImg">
                        <span class="arrow left_arrow"></span>
                        <span class="myWord">
                            谈笑风生
                        </span>
                        <img src="add.png" class="addImg hideNode">
                        <img src="delete.png" class="delImg hideNode">
                    </span>
                    <div class="child_2 hideNode">
                        <span class="changeImg">
                            <span class="myWord">
                            身经百战
                            </span>
                            <img src="add.png" class="addImg hideNode">
                            <img src="delete.png" class="delImg hideNode">
                        </span>
                    </div>
                    <div class="child_2 hideNode">
                        <span class="changeImg">
                            <span class="myWord">
                            学习一个
                            </span>
                            <img src="add.png" class="addImg hideNode">
                            <img src="delete.png" class="delImg hideNode">
                        </span>
                    </div>
                    <div class="child_2 hideNode">
                        <span class="changeImg">
                            <span class="arrow left_arrow"></span>
                            <span class="myWord">
                            吟两句诗
                            </span>
                            <img src="add.png" class="addImg hideNode">
                            <img src="delete.png" class="delImg hideNode">
                        </span>
                        <div class="child_3 hideNode">
                           <span class="changeImg">
                               <span class="myWord">
                                春水初生
                                </span>
                                <img src="add.png" class="addImg hideNode">
                                <img src="delete.png" class="delImg hideNode">
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </fieldset>
<script src="task25.js"></script>
</body>
</html>